<template>
  <div class="app-main-container">
    <div class="app-main-title">
      {{ translate("fyddmx") }}
      <div class="goback" @click="goBack">
        <i class="el-icon-refresh-left" /> {{ translate("backPage") }}
      </div>
    </div>

    <div class="detil_title">
      <span class="text">{{ translate("ddxx") }}</span>
      <span
        v-if="info.orderBean && info.orderBean.payStatus === '3'"
        class="status"
      >{{ translate("zfcg") }}</span>
      <span
        v-if="info.orderBean && info.orderBean.payStatus === '4'"
        class="status"
      >{{ translate("useStatus7") }}</span>
      <span
        v-if="info.orderBean && info.orderBean.payStatus === '5'"
        class="status"
      >{{ translate("tkcg") }}
      </span>
    </div>
    <div class="main_wrap">
      <div class="item">
        <div class="key">{{ translate("orderNum") }}：</div>
        <div class="value">{{ info.orderBean && info.orderBean.orderId }}</div>
      </div>
      <div class="item">
        <div class="key">{{ translate("orderType") }}：</div>
        <div class="value">
          {{ info.orderBean && info.orderBean.orderType }}
        </div>
      </div>
      <div class="item">
        <div class="key">{{ translate("orderTime") }}：</div>
        <div class="value">
          {{ info.orderBean && info.orderBean.orderTime }}
        </div>
      </div>
      <!-- <div class="item">
        <div class="key">完成时间：</div>
        <div class="value">{{ info.orderBean && info.orderBean.orderTime }}</div>
      </div> -->
      <div class="item">
        <div class="key">{{ translate("orderPrice") }}：</div>
        <div class="value">
          {{ info.orderBean && info.orderBean.invoiceMoney }}
        </div>
      </div>
      <div class="item">
        <div class="key">{{ translate("refundPince") }}：</div>
        <div class="value">
          {{ info.orderBean && info.orderBean.refundMoney }}
        </div>
      </div>
      <div class="item">
        <div class="key">{{ translate("orderUser") }}：</div>
        <div class="value">
          {{ info.orderBean && info.orderBean.memberInfo }}
        </div>
      </div>
    </div>

    <div class="detil_title">
      <span class="text">{{ translate("fyqk") }}</span>
      <span
        v-if="info.shareBean && info.shareBean.status === '0'"
        class="status"
      >{{ translate("dqr") }}</span>
      <span
        v-if="info.shareBean && info.shareBean.status === '1'"
        class="status"
      >{{ translate("loseEfficacy") }}</span>
      <span
        v-if="info.shareBean && info.shareBean.status === '2'"
        class="status"
      >{{ translate("yff") }}</span>
    </div>
    <div class="main_wrap">
      <div class="item">
        <div class="key">{{ translate("rwz") }}：</div>
        <div class="value">
          {{ info.shareBean && info.shareBean.shareName }}
        </div>
      </div>
      <div class="item">
        <div class="key">{{ translate("fybl") }}：</div>
        <div class="value">{{ info.shareBean && info.shareBean.ratio }}</div>
      </div>
      <div class="item">
        <div class="key">{{ translate("fxyh") }}：</div>
        <div class="value">
          {{ info.shareBean && info.shareBean.shareMemberInfo }}
        </div>
      </div>
      <div class="item" />
      <div class="item">
        <div class="key">{{ translate("yjfy") }}：</div>
        <div class="value">
          {{ info.shareBean && info.shareBean.taskMoney }}
        </div>
      </div>
      <div class="item">
        <div class="key">{{ translate("skfy") }}：</div>
        <div class="value">
          {{ info.shareBean && info.shareBean.realMoney }}
        </div>
      </div>
      <div class="item">
        <div class="key">{{ translate("zzsj") }}：</div>
        <div class="value">
          {{ info.shareBean && info.shareBean.realSendTime }}
        </div>
      </div>
      <div class="item" />
      <div class="item">
        <div class="key">{{ translate("operator") }}：</div>
        <div class="value">{{ info.shareBean && info.shareBean.creater }}</div>
      </div>
      <div class="item">
        <div class="key">{{ translate("bz") }}：</div>
        <div class="value">{{ info.shareBean && info.shareBean.remarks }}</div>
      </div>
    </div>

    <el-table
      :data="info.detials"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table mt30"
    >
      <el-table-column
        align="center"
        :label="translate('productName')"
        prop="goodName"
        min-width="200"
      />
      <el-table-column
        align="center"
        :label="translate('price')"
        prop="price"
        min-width="80"
      />
      <el-table-column
        align="center"
        :label="translate('num')"
        prop="num"
        min-width="200"
      />
      <el-table-column
        align="center"
        :label="translate('zongjia')"
        prop="allPrice"
        min-width="100"
      />
    </el-table>
    <div class="detail_bottom">
      <div class="line">
        {{ translate("orderGoodMoney") }}：{{ info.allPrice }}{{ translate("rmb") }}
      </div>
      <div class="line">
        {{ translate("yhje") }}：{{ info.yhPrice || 0 }}{{ translate("rmb") }}
      </div>
      <div class="line danger">
        {{ translate("realPut") }}： {{ info.realPrice }}{{ translate("rmb") }}
      </div>
    </div>
  </div>
</template>

<script>
import { ShareOrderDetail } from '@/api'
export default {
  data() {
    return {
      id: '',
      info: {}
    }
  },
  created() {
    this.id = this.$route.query.id
    this.getInfo()
  },
  methods: {
    getInfo() {
      ShareOrderDetail({ param: { id: this.id }}).then(res => {
        this.info = res.record
      })
    },
    goBack() {
      this.$router.replace('/application/shareModule')
    }
  }
}
</script>

<style lang="scss" scoped>
.detil_title {
  margin: 30px 0px 20px;
  .text {
    font-weight: 800;
  }
  .status {
    color: #edb36a;
    margin-left: 20px;
  }
}
.main_wrap {
  display: flex;
  flex-wrap: wrap;
  .item {
    width: 25%;
    display: flex;
    margin-bottom: 16px;
    .key {
      color: #999999;
    }
  }
}
.detail_bottom {
  .line {
    text-align: right;
    margin-top: 20px;
  }
}
</style>
